<template>
  <div class="bg-dark" id="wrap">
    
    <div class="header">
      <my-header></my-header>
    </div>
    <div class="content">
       <router-view></router-view>
    </div>
     <div class="footer">
       <my-footer></my-footer>

     </div>
  </div>
</template>




<script>

import myHeader from './components/my-header'
import myFooter from './components/my-footer'
import './assets/sss/global.scss';

export default {
  name: 'app',
  components:{myHeader,myFooter}
}

</script>

<style lang="scss">
@import './assets/sss/utiles.scss';
#app{
  height:100%;
  width:100%;
  @include flex($flex-direction:column);
  .header{
    height: 44px;
    width:100%;
   
  }
  .content{
     width:100%;
     @include flex;
     overflow: scroll;
  }
  .footer{
    width:100%;
    height:40px;
   
  }
  
 
}


</style>


